<template lang='pug'>
  .main
    Tab(
      :tabList="tabList"
      :isCheckAction="true"
      path="workFlow")
      DataTablePage.table(
        ref="tablePage"
        :slot="slotName"
        :resource="resource"
        title=""
        label=""
        labelName="orderCode"
        :operation="operation"
        :operationWidth="120"
        :tableFullList="tableFullList"
        :tableInitList="tableInitList"
        :filterFullList="filterFullList"
        :filterInitList="filterInitList"
        :filterByAlways="slotName === 'active' ? filterByAlways : {}"
        :orderByInit="orderByInit"
        :columns="columns"
        @getRelation="getRelation")
        ButtonList.button-list(:buttonList="buttonList")
        SmartDialog(
          v-if="dialogVisible"
          v-model="dialogVisible"
          title="选择发起流程"
          size="md")
          SmartForm.smart-form-wrap.container(
            labelPosition="right"
            :labelSize="4"
            :formList="dialogFormList"
            :values="dialogFormValues"
            :columns="columnsList"
            :buttonList="dialogButtonList"
            :formEnterIndex="0")
      QuickReply(slot="quickReply")
      FlowAuth(slot="flowAuth")
</template>

<script>
/**
 * @name 我的工单 TODO
 * @author linmn
 */
import ButtonList from '@/components/ButtonList'
import SmartDialog from '@/components/SmartDialog'
import SmartForm from '@/components/SmartForm'
import DataTablePage from '@/containers/DataTablePage'
import Tab from '@/components/Tab'
import QuickReply from './QuickReply'
import FlowAuth from './FlowAuth'
import {checkActions} from '@/utils/auth'
// import { toolbarCreate } from '@/containers/DataTablePage/toolbar'
// import Detail from './Detail'
import {initColumns} from './columns'
console.log('initColumns', initColumns)
// -------------------------------
const hasAllTab = checkActions("/system/#/workFlow?state='all'")
// const hasMyTab = checkActions("/system/#/workFlow?state='my'")
// const hasDoingTab = checkActions("/system/#/workFlow?state='doing'")
// const hasDoneTab = checkActions("/system/#/workFlow?state='done'")
// const hasActTab = checkActions("/system/#/workFlow?state='active'")
export default {
  name: 'MyFlows',
  components: {
    ButtonList,
    SmartDialog,
    SmartForm,
    Tab,
    DataTablePage,
    QuickReply,
    FlowAuth
    // Detail
  },
  mounted () {
    this.$getRelation({
      relations: 'flowDefines'
    }).then(datas => {
      this.$set(this.columnsList.flowDefineId, 'options', datas.flowDefines)
    })
  },
  data () {
    return {
      dialogVisibleDetail: false,
      dialogTitle: '',
      tempTableList: [],
      tempFilterList: [],
      // 默认表格字段
      tableInitList: ['orderCode', 'title', 'status', 'currentSteps', 'dueDayLimit', 'deadline', 'startTime', 'endTime', 'remark', 'createUserId', 'createTime', 'updateUserId', 'updateTime'],
      tableFullList: ['orderCode', 'title', 'status', 'currentSteps', 'dueDayLimit', 'deadline', 'startTime', 'endTime', 'remark', 'createUserId', 'createTime', 'updateUserId', 'updateTime'],
      filterInitList: [],
      filterFullList: [],
      // infoList: ['orderCode', 'formValues', 'title', 'status', 'dueDayLimit', 'currentUserName', 'currentStepType', 'currentStepDefineId', 'currentStepInstanceId', 'currentUserId', 'deadline', 'startTime', 'endTime', 'remark', 'createUserId', 'createTime', 'updateUserId', 'updateTime'],
      incidentColumns: {},
      orderByInit: [{
        name: 'updateTime',
        sort: 'desc'
      }],
      operation: [{
        label: '处理',
        name: 'detail',
        icon: 'eventLog',
        tooltip: true,
        isShow: (data) => {
          return data.handle
          // return data.status !== 'FINISH' && Number(data.currentUserId) === Number(getUserId())
        },
        func: ({funcProps}) => {
          const {data} = funcProps
          this.$router.push({path: `/flowStep`, query: {flow: data.id}})
          // tablePage.dialogTitle = `【查看记录】 ${data.title}`
          // tablePage.infoValue = data
          // tablePage.dialogVisibleDetail = true
        }
      }, {
        label: '任务详情',
        name: 'task',
        icon: 'info',
        tooltip: true,
        func: ({funcProps}) => {
          const {data} = funcProps
          this.$router.push({path: `/taskDetail`, query: {flow: data.id}})
        }
      }],
      buttonList: [{
        label: '选择发起流程',
        func: ({funcProps}) => {
          this.dialogVisible = true
        }
      }],
      dialogVisible: false,
      dialogFormList: ['flowDefineId'],
      dialogFormValues: {},
      columnsList: {
        flowDefineId: {
          label: '工作流',
          width: 130,
          relation: 'flowDefines',
          render: 'select',
          filter: {
            type: 'select',
            live: true,
            width: 140
          },
          form: {
            type: 'select',
            live: true,
            width: 250,
            rules: [{
              type: 'required',
              message: '请选择工作流'
            }]
          }
        }
      },
      dialogButtonList: [{
        label: '发起',
        type: 'complete',
        func: ({funcProps}) => {
          const {form} = funcProps
          window.location.href = `/workflow/#/startForm?flowId=${form.formValues.flowDefineId}`
        }
      }],
      columns: {
        ...initColumns,
        flowDefineId: {
          label: '工作流定义ID',
          form: {
            type: 'input'
          }
        },
        title: {
          label: '流程标题',
          form: {
            type: 'input'
          }
        },
        status: {
          label: '工单状态',
          relation: 'flowInstanceStatus',
          render: 'select',
          width: 100,
          form: {
            type: 'select',
            live: true
          },
          filter: {
            type: ''
          }
        },
        dueDayLimit: {
          label: '办理时限',
          render: ({data}) => {
            return data ? Math.round(data / 24).toFixed(0) + '天' : ''
          },
          width: 100,
          form: {
            type: 'number'
          }
        },
        deadline: {
          label: '截至时间',
          width: 150,
          render: {
            type: 'time'
          },
          sort: true,
          dateType: 'YYYY-MM-DD HH:mm',
          form: {
            type: 'input'
          }
        },
        startTime: {
          label: '开始办理时间',
          width: 150,
          render: {
            type: 'time'
          },
          sort: true,
          dateType: 'YYYY-MM-DD HH:mm',
          form: {
            type: 'input'
          }
        },
        endTime: {
          label: '结束完成时间',
          width: 150,
          render: {
            type: 'time'
          },
          sort: true,
          dateType: 'YYYY-MM-DD HH:mm',
          form: {
            type: 'select'
          }
        },
        currentStepDefineId: {
          label: '当前节点',
          relation: 'stepDefines',
          width: 100,
          render: 'select',
          form: {
            type: 'input'
          }
        },
        currentSteps: {
          label: '工作状态 - 当前节点 - 当前操作者',
          // isWrap: true,
          relation: 'users',
          width: 300,
          minLength: 10,
          render: ({data, column, full}) => {
            const datas = data.map(({stepDefineName, stepOperator, stepStatus}) => {
              const operator = column.options.find(col => col.value === Number(stepOperator))
              return `${stepStatus} - ${stepDefineName} - ${operator ? operator.label : stepOperator}`
            })
            return datas.join('，')
          }
        },
        currentStepInstanceId: {
          label: '当前节点',
          form: {
            type: 'input'
          }
        },
        currentUserId: {
          label: '当前操作者用户ID',
          form: {
            type: 'input'
          }
        },
        currentUserName: {
          label: '当前操作者',
          width: 100,
          form: {
            type: 'input'
          }
        },
        currentStepType: {
          label: '当前节点实例状态',
          form: {
            type: 'input'
          }
        },
        orderCode: {
          label: '工单编号'
        },
        formValues: {
          label: '业务表信息',
          minLength: 1,
          form: {
            type: 'input'
          }
        }
      },
      filterByAlways: {
        status: 'ACTIVATY'
      }
    }
  },
  computed: {
    slotName () {
      const state = this.$route.query.state
      if (!state) {
        return this.tabList[0].name || ''
      }
      return state === 'quickReply' || state === 'flowAuth' ? '' : state
    },
    resource () {
      // 请求的资源
      const resourceList = {
        all: '/workflow/allList',
        my: '/workflow/myList',
        doingList: '/workflow/doingList',
        doneList: '/workflow/doneList',
        active: '/workflow/myList',
        quickReply: '/workflow/quickReply', // 快捷回复
        flowAuth: '/workflow/flowAuth' // 委托
      }
      if (!this.tabList || !this.tabList.length) return
      if (this.slotName === this.tabList[0].name) {
        return resourceList.my
      }
      return resourceList[this.slotName]
    },
    checkTab () {
      return this.$route.query.state === this.resource.replace('workflow/', '')
    },
    tabList () {
      const lists = [{
        label: '所有工单',
        name: 'all',
        isHide: !hasAllTab
      }, {
        label: '我的工单',
        name: 'my'
      }, {
        label: '待办列表',
        name: 'doingList'
      }, {
        label: '已办列表',
        name: 'doneList'
      }, {
        label: '未完成',
        name: 'active'
      }, {
        label: '快捷回复',
        name: 'quickReply'
      }, {
        label: '委托代理',
        name: 'flowAuth'
      }]
      return lists.filter(list => { return !list.isHide })
    }
  },
  methods: {
    getRelation (columnsList) {
      this.incidentColumns = columnsList
    }
  }
}
</script>

<style lang='sass' scoped>
.main
  padding: 0px 20px 0
  height: 100%
  flex: 1
  /deep/ .el-tabs__content
    // overflow: auto!important
    /deep/ .main-tabs-pane
      height: 93%
  .table
    padding: 0
    margin-top: 40px
.smart-form-wrap
  margin: 40px 0
.button-list
  position: absolute
  top: 0
</style>
